<template>
    <div class="v-slide-frame">
        <div class="slide-fleft">
            <slot></slot>
        </div>
        <div ref="toggleBar" class="slide-fright" :style="toggleStyle">
            <div class="toggle-bar" v-drag end-func="handleMouseup" drag-val="dragVal"></div>
            <div class="toggle-content">
                <slot name="right"></slot>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
import bus from '../utils/Eventbus.js';
export default {
    name: 'v-slide-frame.vue',
    props: {
        toggleWidth: {
            type: Number,
            default: 485
        }
    },
    data () {
        return {
            dragVal: null,
            currentWidth: this.toggleWidth,
            toggleStyle: {
                width: '0px'
            },
            box: '',
            tab: '',
            initWidth: 485,
            minWidth: 60,
            maxWidth: 485,
            maxJobs: {
                width: 485,
                account: false
            },
            maxVehicles: {
                width: 485,
                account: false
            },
            maxContours: {
                width: 485,
                account: false
            },
            maxPaths: {
                width: 485,
                account: false
            },
            maxRanges: {
                width: 485,
                account: false
            }
        };
    },
    watch: {
        dragVal: {
            handler(val) {
                if (!val || val.x === undefined) return;
                this.handleSetWidth(val);
            },
            deep: true
        }
    },
    mounted() {
        bus.on('p-panel.tabChange', this.handleGetWidth);
        this.init();
    },
    methods: {
        init() {
            this.dragVal = { x: 0, y: 0 };
        },
        handleMouseup() {
            // console.log('v-slide-frame.handleMouseup: ', this.$refs.toggleBar.getBoundingClientRect());
            this.currentWidth = this.$refs.toggleBar.getBoundingClientRect().width;
            this.$emit('change', this.currentWidth);
        },

        handleSetWidth(val) {
            if (!this.box || !this.maxWidth) this.handleGetWidth(this.tab); // 手动获取obj
            let width = this.currentWidth - val.x;
            // console.error('test.handleSetWidth - width: ', this.currentWidth, val.x, 'maxWidth: ', this.maxWidth);
            if (width <= this.minWidth) {
                this.toggleStyle.width = this.minWidth + 'px';
            } else if (width >= this.minWidth && width <= this.maxWidth) {
                this.toggleStyle.width = width + 'px';
            }
        },

        async handleGetWidth(val) {
            if (val === 'jobs') {
                if (this.maxJobs.account) this.maxWidth = this.maxJobs.width;
                else await this.getMaxWidth(val);
            }
            if (val === 'vehicles') {
                if (this.maxVehicles.account) this.maxWidth = this.maxVehicles.width;
                else await this.getMaxWidth(val);
            }
            if (val === 'contours') {
                if (this.maxContours.account) this.maxWidth = this.maxContours.width;
                else await this.getMaxWidth(val);
            }
            if (val === 'paths') {
                if (this.maxPaths.account) this.maxWidth = this.maxPaths.width;
                else await this.getMaxWidth(val);
            }
            if (val === 'ranges') {
                if (this.maxRanges.account) this.maxWidth = this.maxRanges.width;
                else await this.getMaxWidth(val);
            }

            // console.error(this.maxJobs, this.toggleStyle.width.split('p')[0], this.maxWidth);
            // await 计算完maxWidth后再执行
            if (this.toggleStyle.width.split('p')[0] > this.maxWidth) {
                this.toggleStyle.width = this.maxWidth + 'px';
                this.currentWidth = this.maxWidth;
            }
        },
        async getMaxWidth(val) {
            this.tab = val;
            this.box = await this.getObj(val); // table表格异步加载
            // console.error('test.handleGetWidth - box: ', this.box, val);
            if (!this.box) {
                this.toggleStyle.width = '485px';
                this.currentWidth = 485;
                return;
            }
            // addEventListener('onload', this.box = await this.getObj(val));
            // console.error('test.handleGetWidth - this.box: ', this.box, this.maxJobs);

            let tHeader = this.box.querySelector('.v-table-header__record'); // 头部栏
            let tColumnArr = this.box.querySelectorAll('.v-table-header-column'); // 子项数组
            let tColumn = tColumnArr[tColumnArr.length - 1]; // 操作栏
            let headerWidth = this.getStyle(tHeader, 'width').split('p')[0];
            let columnWidth = this.getStyle(tColumn, 'width').split('p')[0];

            this.maxWidth = headerWidth - columnWidth + 28;
            this.setMaxWidth(val, this.maxWidth);
            // console.error('test.handleGetWidth - toggleStyle.width: ', this.toggleStyle.width, 'maxWidth: ', this.maxWidth);
        },
        setMaxWidth(val, width) {
            if (val === 'jobs') {
                this.maxJobs.width = width;
                this.maxJobs.account = true;
            }
            if (val === 'vehicles') {
                this.maxVehicles.width = width;
                this.maxVehicles.account = true;
            }
            if (val === 'contours') {
                this.maxContours.width = width;
                this.maxContours.account = true;
            }
            if (val === 'paths') {
                this.maxPaths.width = width;
                this.maxPaths.account = true;
            }
            if (val === 'ranges') {
                this.maxRanges.width = width;
                this.maxRanges.account = true;
            }
        },
        getObj(val) {
            let dom;
            if (val === 'jobs') dom = document.getElementById('pane-jobs');
            if (val === 'vehicles') dom = document.getElementById('pane-vehicles');
            if (val === 'contours') dom = document.getElementById('pane-contours');
            if (val === 'paths') dom = document.getElementById('pane-paths');
            if (val === 'ranges') dom = document.getElementById('pane-ranges');
            if (dom) return dom;
        },
        getStyle(obj, attr) {
            // if (obj.currentStyle) return obj.currentStyle[attr];
            // else return getComputedStyle(obj, false)[attr];
            let style = null;
            if (window.getComputedStyle) style = window.getComputedStyle(obj, false);
            else if (obj.currentStyle) style =  obj.currentStyle;
            return style[attr];
        }
    }
};
</script>

<style lang="scss">
.v-slide-frame {
    width: 100%;
    height: 100%;
    display: flex;

    .slide-fleft {
        flex: 1 1 auto;
        /*解决左边图标before覆盖在右边栏上*/
        overflow: hidden;
    }
    .slide-fright {
        width: 200px;
        overflow-x: hidden;
        overflow-y: auto;
        flex: 0 0 auto;
        border-left: #ebecf1 1px solid;
        /*box-shadow: 0 0 10px #333333;*/
        display: flex;

        .toggle-bar {
            flex: 0 0 auto;
            width: 3px;
            /*width: 1px;*/
            height: 100%;
            background: transparent;
            /*border-right: 1px solid #ebecf1;*/
            cursor: col-resize;
        }

        .toggle-content {
            width: 100%;
            flex: 1 1 auto;
        }
    }
}
</style>
